﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body>
    <!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
    <div class="page-group">
        <div class="page page-current" id='router'>
            <header class="bar bar-nav" style="background-color:black">
                <a class="button button-link button-nav pull-left back">
                    <span class="icon icon-left"></span>
                    返回
                </a>
                <h1 class='title' style="color:white">添加查找信息</h1>
            </header>
            <div class="content" id="el">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">寻找人</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="seek_name" id="seek_name">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- Date -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">寻找记录</div>
                                    <div class="item-input">
                                        <textarea v-model="seek_content" id="seek_content"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-toggle"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">是否找回</div>
                                    <div class="item-input pull-right">
                                        <label class="label-switch" for="check">
                                            <input type="checkbox" v-model="is_seeked" id="check">
                                            <div class="checkbox"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li v-if="is_seeked">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">找回的位置</div>
                                    <div class="item-input">
                                        <textarea v-model="seeked_address" id="seeked_address"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-100"><a @click="confirm()" href="#" class="button button-big button-fill button-success">添加</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script>
        $.init()
    </script>
    <script src="js/vue.min.js"></script>
    <script>
        function GetQueryString(key) {
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var result = window.location.search.substr(1).match(reg);
            return result ? decodeURIComponent(result[2]) : '';
        }
        var vm = new Vue({
            el: '#el',
            data: {
                localurl: 'http://101.132.109.236:8081',
                p_car_id: '',
                seek_name: '',
                seek_content: '',
                is_seeked: false,
                seeked_address: ''
            },
            created: function () {
                if (GetQueryString('p_car_id')) {
                    this.p_car_id = GetQueryString('p_car_id');
                }
            },
            methods: {
                confirm: function () {
                    var name = /^[\u4e00-\u9fa5]{2,4}$/;
                    if (!name.test(vm.seek_name)) {
                        $("#seek_name").focus();
                        $.toast("请输入正确姓名");
                        return;
                    }
                    if (vm.seek_content == '') {
                        $("#seek_content").focus();
                        $.toast("请输入寻找内容");
                        return;
                    }

                    if (vm.is_seeked) {
                        if (vm.seeked_address == '') {
                            $("#seeked_address").focus();
                            $.toast("请输入找回的位置");
                            return;
                        }
                    }
                    vm.editinfo();
                },
                editinfo: function () {
                    var car_search_info = {
                        is_seeked: '',
                        seek_name: '',
                        seek_content: '',
                        is_seeked: '',
                        seeked_address: ''
                    }

                    if (vm.p_car_id) car_search_info.p_car_id = vm.p_car_id;
                    if (vm.seek_name) car_search_info.seek_name = vm.seek_name;
                    if (vm.seek_content) car_search_info.seek_content = vm.seek_content;
                    if (vm.seeked_address) car_search_info.seeked_address = vm.seeked_address;
                    car_search_info.is_seeked = vm.is_seeked ? '0' : '1';
                    var token = localStorage.getItem("token");
                    //console.log(appeared)
                    $.ajax({
                        url: '' + vm.localurl + '/PCarSearch/Insert',
                        data: JSON.stringify(car_search_info),
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        xhrFields: {
                            withCredentials: true
                        },
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("token", token);
                        },
                        success: function (data) {
                            if (data.err) {
                                $.toast(data.err);
                            }
                            else {
                                $.toast("添加成功！");
                                //$.router.back();
                            }
                        },
                        error: function () {

                        }
                    });
                },
            }
        })

    </script>
</body>
</html>